<template>
  <div class="dashboard-container" v-if="roleName == '管理员'">
    <h1>员工信息管理</h1>
    <el-dialog title="新增" :visible.sync="addButtonController" width="30%"
    @close="close('ruleForm')">
      <el-form :rules="roles" label-width="20%"  :model="addList" ref="ruleForm" >
        <el-form-item label="用户名称" prop="userName">
          <el-input v-model="addList.userName" maxlength="20" show-word-limit style="width: 80%" clearable placeholder="请输入用户名称"/>
        </el-form-item>
        <el-form-item label="性别" prop="sex">
          <el-radio-group v-model="addList.sex">
            <el-radio label="男" value="男">男</el-radio><el-radio label="女" value="女">女</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="用户密码" prop="userPassword">
          <el-input v-model="addList.userPassword" maxlength="20" show-word-limit style="width: 80%" clearable placeholder="请输入用户密码"/>
        </el-form-item>
        <el-form-item label="手机号" prop="phoneNumber">
          <el-input v-model="addList.phoneNumber" maxlength="11" show-word-limit style="width: 80%" clearable placeholder="请输入手机号"/>
        </el-form-item>
        <el-form-item label="身份证号" prop="identificationCard">
          <el-input v-model="addList.identificationCard" maxlength="18" show-word-limit style="width: 80%" clearable placeholder="请输入身份证号"/>
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input v-model="addList.remark" maxlength="20" show-word-limit style="width: 80%" clearable placeholder="请输入备注"/>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="add('ruleForm')">确 定</el-button>
        <el-button @click="close('ruleForm')">取 消</el-button>
      </span>
    </el-dialog>
    <el-dialog title="修改" :visible.sync="updateButtonController" width="30%"
               @close="close('ruleForm')">
      <el-form :rules="roles" label-width="20%"  :model="updateList" ref="ruleForm" >
        <el-form-item label="用户名称" prop="userName">
          <el-input v-model="updateList.userName" maxlength="20" show-word-limit style="width: 80%" clearable placeholder="请输入用户名称"/>
        </el-form-item>
        <el-form-item label="性别" prop="sex">
          <el-radio-group v-model="updateList.sex">
            <el-radio label="男" value="男">男</el-radio><el-radio label="女" value="女">女</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="用户密码" prop="userPassword">
          <el-input v-model="updateList.userPassword" maxlength="20" show-word-limit style="width: 80%" clearable placeholder="请输入用户密码"/>
        </el-form-item>
        <el-form-item label="手机号" prop="phoneNumber">
          <el-input v-model="updateList.phoneNumber" maxlength="11" show-word-limit style="width: 80%" clearable placeholder="请输入手机号"/>
        </el-form-item>
        <el-form-item label="身份证号" prop="identificationCard">
          <el-input v-model="updateList.identificationCard" maxlength="18" show-word-limit style="width: 80%" clearable placeholder="请输入身份证号"/>
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input v-model="updateList.remark" maxlength="20" show-word-limit style="width: 80%" clearable placeholder="请输入备注"/>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="update('ruleForm')">确 定</el-button>
        <el-button @click="close('ruleForm')">取 消</el-button>
      </span>
    </el-dialog>

    <el-dialog title="删除" :visible.sync="deleteButtonController" width="30%">
     <h3>请确认是否删除！</h3>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="deleteUser">确 定</el-button>
        <el-button @click="deleteButtonController = false">取 消</el-button>
      </span>
    </el-dialog>

    <el-button type="primary" style="margin-left: 30%;width: 100px" @click="addButton">新增</el-button>
    <el-input v-model="userId2" placeholder="用户ID" name="username" type="text" clearable
              style="margin-left: 40px;width: 200px"
    />
    <el-input v-model="userName2" placeholder="用户名称" name="username" type="text" clearable
              style="margin-left: 40px;width: 200px"
    />
    <el-select v-model="roleName2" clearable placeholder="请选择角色" style="margin-left: 40px;width: 200px">
      <el-option v-for="item in roleList" :key="item.value" :label="item.label" :value="item.value"/>
    </el-select>
    <el-button type="primary" style="margin-left: 40px;width: 100px" @click="selectUser">查询</el-button>
    <el-button style="margin-left: 40px;width: 100px" @click="checkUser">重置</el-button>

    <el-table :data="userList" height="659px" border style="width: 100%;margin-top: 20px">
      <el-table-column align="center" fixed prop="userId" sortable label="用户ID"/>
      <el-table-column align="center" fixed prop="userName" sortable label="用户名"/>
      <el-table-column align="center" fixed prop="userPassword" sortable label="用户密码"/>
      <el-table-column align="center" fixed prop="roleName" sortable label="角色"/>
      <el-table-column align="center" fixed prop="sex" sortable label="性别"/>
      <el-table-column align="center" fixed prop="identificationCard" sortable label="身份证号"/>
      <el-table-column align="center" fixed prop="phoneNumber" sortable label="手机号"/>
      <el-table-column align="center" fixed prop="remark" sortable label="备注"/>
      <el-table-column align="center" fixed label="操作">
        <template v-slot="scope">
          <el-button type="text" @click="updateButton(scope.row)">修改</el-button>

          <el-button type="text" @click="deleteButton(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

  </div>
  <div v-else class="dashboard-container"><h1>无权访问</h1></div>
</template>
<script>
import { mapGetters } from 'vuex'
import { deleteUser, insertUser, selectAllUser, updateUser } from '@/api/user'

export default {
  name: 'users', computed: { ...mapGetters(['userId', 'userName', 'roleName']) },
  data() {  // 页面参数
    return {
      userId1: this.$store.getters.userId,
      userName1: this.$store.getters.userName,
      roleName1: this.$store.getters.roleName,
      userId2: '',
      userName2: '',
      roleName2: '',
      roleList: [
        {
          value: '员工',
          label: '员工'
        }, {
          value: '管理员',
          label: '管理员'
        }],
      userList: [],
      addButtonController: false,
      addList: {
        userName: '',
        userPassword: '',
        sex: '',
        phoneNumber: '',
        identificationCard: '',
        remark: ''
      },
      updateButtonController:false,
      updateList: {
        userTableId: '',
        userId: '',
        roleId: '',
        userName: '',
        userPassword: '',
        sex: '',
        phoneNumber: '',
        identificationCard: '',
        remark: ''
      },
      roles: {
        userName: [
          { required: true, trigger: 'blur', message: '用户名不能为空' },
          { min: 1, max: 20, message: '长度在 1 到 20 个字符', trigger: 'blur' }
        ],
        userPassword: [
          { required: true, trigger: 'blur', message: '密码不能为空' },
          { min: 6, max: 20, message: '长度在 6 到 20 个字符', trigger: 'blur' }
        ],
        sex: [
          { required: true, trigger: 'blur', message: '性别不能为空' }
        ],
        phoneNumber: [
          { required: true, trigger: 'blur', message: '手机号不能为空' },
          { min: 11, max: 11, message: '请输入11位手机号', trigger: 'blur' }
        ],
        identificationCard: [
          { required: true, trigger: 'blur', message: '身份证号不能为空' },
          { min: 18, max: 18, message: '请输入18位身份证号', trigger: 'blur' }
        ],
      },
      deleteButtonController: false,
      deleteUserId: ''
    }
  },
  // 页面初始化时加载的方法
  mounted() {
    this.selectUser()
  },
  // 页面的方法和事件
  methods: {
    selectUser() {
      selectAllUser({
        userId: this.userId2,
        userName: this.userName2,
        roleName: this.roleName2
      }).then(
        response => {
          console.log(response.data)
          this.userList = response.data
        }
      )
    },
    checkUser() {
      this.userId2 = ''
      this.userName2 = ''
      this.roleName2 = ''
      this.selectUser()
    },
    addButton() {
      this.addList = {
        userName: '',
        userPassword: '',
        sex: '',
        phoneNumber: '',
        identificationCard: '',
        remark: ''
      }
      this.addButtonController = true
    },
    updateButton(row){
      this.updateList = {
        userTableId: row.userTableId,
        userId: row.userId,
        roleId: row.roleId,
        userName: row.userName,
        userPassword: row.userPassword,
        sex: row.sex,
        phoneNumber: row.phoneNumber,
        identificationCard: row.identificationCard,
        remark: row.remark
      }
      this.updateButtonController = true
    },
    add(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          insertUser({
            userName: this.addList.userName,
            userPassword: this.addList.userPassword,
            sex: this.addList.sex,
            phoneNumber: this.addList.phoneNumber,
            identificationCard: this.addList.identificationCard,
            remark: this.addList.remark
          }).then(
            response => {
              this.addButtonController = false
              this.selectUser()
            }
          )
        } else {return false;}});},
    update(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          updateUser({
            userTableId: this.updateList.userTableId,
            userId: this.updateList.userId,
            roleId: this.updateList.roleId,
            userName: this.updateList.userName,
            userPassword: this.updateList.userPassword,
            sex: this.updateList.sex,
            phoneNumber: this.updateList.phoneNumber,
            identificationCard: this.updateList.identificationCard,
            remark: this.updateList.remark
          }).then(
            response => {
              this.updateButtonController = false
              this.selectUser()
            }
          )
        } else {return false;}});},
    close(formName){
      this.$refs[formName].resetFields();
      this.addButtonController =false
      this.updateButtonController = false
    },
    deleteButton(row) {
      this.deleteUserId = row.userId
      this.deleteButtonController = true
    },
    deleteUser() {
      deleteUser({
        userId: this.deleteUserId
      }).then(
        response => {
          this.deleteButtonController = false
          this.selectUser()
        }
      )
    }
  }
}
</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 30px;
  }

  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
</style>
